<!--  族库管理 -->
<template>
  <div>
    <div class="flex">
      <div class="flex-left">
        <div class="navigationBar">
          <label>族目录</label>
        </div>
        <div class="flex-tree">
          <el-tree
            ref="tree"
            :data="data"
            node-key="Id"
            @node-click="handleNodeClick"
            :highlight-current="true"
          >
          </el-tree>
        </div>
      </div>
      <div class="flex-right">
        <navigation-bar>
          <div class="searchContent">
            <el-input
              v-model="FileName"
              placeholder="请输入族名称"
              size="mini"
              style="width: 150px; margin-right: 10px"
            ></el-input>
            <custom-button
              type="search"
              style="margin-right: 10px"
              @searchClick="searchClick"
            ></custom-button>
            <custom-button
              type="reset"
              style="margin-right: 10px"
              @resetClick="resetClick"
            ></custom-button>
            <custom-button
              type="custom"
              title="标签"
              icon="el-icon-s-flag"
              @customClick="showBqSelect"
            ></custom-button>
          </div>
        </navigation-bar>
        <div class="gjw-list">
          <div v-if="listData.length == 0" class="noData">暂无数据</div>
          <div v-else>
            <div class="gjw-list-list">
              <div class="gjw-list-item">
                <div
                  class="item"
                  v-for="(item, index) in listData"
                  v-bind:key="index"
                  @mouseover="itemOver(item)"
                  @mouseleave="itemLevel"
                >
                  <div class="item-img" @click="showDetail(item)">
                    <el-image
                      style="height: 120px"
                      :src="item.imgSrc"
                    ></el-image>
                  </div>
                  <div class="item-button" v-show="!item.show">&nbsp;</div>
                  <div class="item-button" v-show="item.show">
                    <el-button
                      type="primary"
                      icon="el-icon-download"
                      size="small"
                      @click="downItem(item)"
                      >下载</el-button
                    >
                    <el-button
                      type="default"
                      icon="el-icon-star-off"
                      size="small"
                      v-if="item.isSc == 0"
                      @click="itemSc(item)"
                      >收藏</el-button
                    >
                    <el-button
                      type="default"
                      icon="el-icon-star-on"
                      size="small"
                      v-if="item.isSc == 1"
                      @click="itemSc(item)"
                      >取消收藏</el-button
                    >
                  </div>
                  <div class="item-title">
                    <el-tooltip :content="item.name" placement="top">
                      <label>{{ item.name }}</label>
                    </el-tooltip>
                  </div>
                  <el-row class="item-row">
                    <el-col
                      :span="24"
                      style="text-align: left; padding-left: 10px"
                      >格式：{{ item.gs }}</el-col
                    >
                    <!-- <el-col
											:span="12"
											style="text-align: right; padding-right: 10px"
											>版本：{{ item.bb }}</el-col
										> -->
                  </el-row>
                </div>
              </div>
            </div>
            <div class="gjw-list-page">
              <el-pagination
                background
                :layout="
                  hasIsSizes
                    ? 'prev, pager, next,total,sizes'
                    : 'prev, pager, next,total'
                "
                :total="count"
                :page-size="size"
                :current-page="current"
                @current-change="pageChange"
                :page-sizes="[20, 50, 100, 200, 500]"
                @size-change="handleSizeChange"
              >
                >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="dialogShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogClose"
      >
        <div class="detail-dialog">
          <div class="detail-dialog-title">
            <el-row>
              <el-col :span="16">
                <div class="detail-name" style="color: brown">
                  {{ tableName }}
                </div>
                <div class="detail-name">{{ curItem.name }}</div>
                <div class="detail-update">
                  上传时间：{{
                    curItem.updateTime
                  }}&nbsp;&nbsp;&nbsp;&nbsp;上传人：{{ curItem.username }}
                </div>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <el-button
                  type="primary"
                  icon="el-icon-s-tools"
                  size="small"
                  @click="bindBq(curItem)"
                  >标签绑定</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  size="small"
                  @click="downItem(curItem)"
                  >下载</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-off"
                  size="small"
                  v-if="curItem.isSc == 0"
                  @click="itemSc(curItem)"
                  >收藏</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-on"
                  size="small"
                  v-if="curItem.isSc == 1"
                  @click="itemSc(curItem)"
                  >取消收藏</el-button
                >
              </el-col>
            </el-row>

            <el-row style="margin: 20px 0">
              <el-col :span="16">
                <div class="detail-wrapper">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="缩略图" name="first">
                      <div class="img-list">
                        <div class="img-list-left-arrow" @click="imgLeftClick">
                          <i class="el-icon el-icon-arrow-left"></i>
                        </div>
                        <div class="img-list-left-img">
                          <el-image
                            style="height: 400px; margin-top: 50px"
                            :src="imgList[imgIndex]"
                          ></el-image>
                        </div>
                        <div
                          class="img-list-right-arrow"
                          @click="imgRightClick"
                        >
                          <i class="el-icon el-icon-arrow-right"></i>
                        </div>
                      </div>
                      <div class="img-list-li">
                        <ul>
                          <li
                            v-for="(item, index) in imgList"
                            v-bind:key="index"
                            :class="imgIndex == index ? 'hover' : ''"
                          ></li>
                        </ul>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="3D" name="second">3D</el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
              <el-col :span="8" style="float: right">
                <div class="detail-wrapper">
                  <div class="detail-wrapper-type">
                    <label>类型：</label>
                    <el-select
                      v-model="typeValue"
                      placeholder="请选择类型"
                      size="small"
                      style="width: 290px"
                      @change="typeChange(e)"
                    >
                      <el-option
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                        :label="item.FamilyTypeName"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div class="collapseType">
                    <!-- <el-collapse v-model="activeCollapse">
                      <el-collapse-item
                        :title="item.FamilyTypeName"
                        :name="index"
                        class="typeItem"
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                      >
                        <div
                          class="collapseType-item"
                          v-for="(child, cindex) in item.FamilyParameters"
                          v-bind:key="cindex"
                        >
                          <div class="collapseType-item-left">
                            {{ child.ParamKey }}：
                          </div>
                          <div class="collapseType-item-right">
                            {{ child.ParamVal }}
                          </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse> -->
                    <div
                      class="collapseType-item"
                      v-for="(child, cindex) in propertysValue"
                      v-bind:key="cindex"
                    >
                      <div class="collapseType-item-left">
                        {{ child.ParamKey }}：
                      </div>
                      <div class="collapseType-item-right">
                        {{ child.ParamVal }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </custom-dialog>
    </div>

    <div v-if="dialogFolderShow">
      <custom-dialog
        :title="dialogFolderTitle"
        size="large"
        @dialogClose="dialogFolderClose"
      >
        <form-index
          :formConfig="formConfigFolder"
          @submit="folderSubmit"
          :type="typeFolder"
          @formInputChange="formInputFolderChange"
          ref="form"
        >
        </form-index>
      </custom-dialog>
    </div>

    <div v-if="dialogBqShow">
      <custom-dialog title="标签绑定" size="large" @dialogClose="dialogBqClose">
        <bindBq :fileId="curItem.Id" @success="dialogBqClose"></bindBq>
      </custom-dialog>
    </div>

    <div v-if="dialogBqSelectShow">
      <custom-dialog
        title="标签选择"
        size="large"
        @dialogClose="dialogBqSelectClose"
      >
        <bindBqSearch @success="bqSelect"></bindBqSearch>
      </custom-dialog>
    </div>

    <div v-if="showloading">
      <loadingMask></loadingMask>
    </div>
  </div>
</template>

<script>
import { presetFieldsForm } from "@/assets/form/managementCenter/expandManage/presetFieldsForm";
import { zkForm } from "@/assets/form/managementCenter/zkForm";
import customDialog from "@/components/customComponents/customDialog";
import customButton from "@/components/customComponents/customForm/customButton";
import formIndex from "@/components/customComponents/customForm/formIndex";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon, ImageAddress } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { SessionCommon } from "@/libs/sessionCommon";
import { Utility } from "@/libs/utility";
import bindBq from "./bindBq.vue";
import bindBqSearch from "./bindBqSearch.vue";
import loadingMask from "@/components/customComponents/loading";
export default {
  components: {
    navigationBar,
    customButton,
    customDialog,
    formIndex,
    bindBq,
    bindBqSearch,
    loadingMask,
  },
  data() {
    return {
      showloading: true,
      inter: null,
      FileName: "",
      dialogBqSelectShow: false,
      dialogBqShow: false,
      typeValue: 0,
      activeCollapse: ["1"],
      activeName: "first",
      imgIndex: 0,
      imgList: [],
      hasIsSizes: true,
      count: 2,
      size: 20,
      current: 1,
      listData: [],
      curHeight: 100,
      folderData: null,
      fatherFolderId: "0",
      dialogFolderTitle: "新增目录",
      formConfigFolder: zkForm,
      typeFolder: "add",
      dialogFolderShow: false,
      data: [],
      tableIndex: "",
      tableName: "",
      selectItem: [],
      username: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "FileName",
          label: "文件名称",
        },
        {
          prop: "FileSize",
          label: "文件大小",
        },
        {
          prop: "UploadUser",
          label: "创建人",
        },
        {
          prop: "UploadTime",
          label: "创建时间",
        },
      ],
      btnList: ["delete", "lookViewRow", "downloadRow"],

      // 弹窗是否显示
      dialogShow: false,
      // 弹窗标题 (新增修改不同)
      dialogTitle: "",

      // form的配置信息
      formConfig: presetFieldsForm,
      type: "add",
      propertys: [],
      propertysValue: [],
    };
  },
  methods: {
    showBqSelect() {
      this.dialogBqSelectShow = true;
    },
    bqSelect(e) {
      var data = JSON.parse(e);
      var ids = data.map((t) => {
        return t.Id;
      });
      this.current = 1;
      this.initPage(ids);
      this.dialogBqSelectShow = false;
    },
    dialogBqSelectClose() {
      this.dialogBqSelectShow = false;
    },
    dialogBqClose() {
      this.dialogBqShow = false;
    },
    typeChange(e) {
      console.log(e, "e.......");
    },
    getHeight() {
      this.curHeight = window.innerHeight - 146;
    },
    getData(e) {
      e.FileFolderId = this.tableIndex;
      let self = this;
      AjaxCommon(`/api/ResourceFile/uploadfile`, "postForm", e).then((res) => {
        console.log(res, "3333");
        if (res.data.status == 200) {
          PopupCommon.notify("success", "新增成功");
          self.initPage();
          self.dialogShow = false;
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    handleNodeClick(data) {
      this.tableIndex = data.Id;
      this.tableName = data.FolderName;
      this.initPage();
    },
    // 懒加载获取树形结构
    loadNode(node, resolve) {
      console.log(node.level, node.data.id);
      if (node.level == 0) {
        // node其实是需要展开树节点，但是第一次的node是个无用的数据，可以认为这个node是element给我们创建的，判断的话，就是level等于0
        this.getTreeData(0, resolve);
      } else {
        this.getTreeData(node, resolve);
      }
    },
    // 获取树形结构的数据
    getTreeData(node, resolve) {
      var searchNodeID = node ? node.data.id : null;
      AjaxCommon(`/api/familyfolder?key=${searchNodeID}`, "get", null).then(
        (res) => {
          if (res.data.status == 200) {
            var data = res.data.response;
            data = data.map((r) => {
              return {
                id: r.Id,
                label: r.FolderName,
                children: [],
              };
            });
            console.log(data, "data.......");
            if (!node) {
              return resolve(data); // resolve是一个函数，它会接受一个数组，作为你要展开的节点的孩子节点，如果没有孩子节点，直接传一个空数组
            } else {
              if (data && data.length > 0) {
                return resolve(data); // 如果需要设置一个树节点，也可以在这里设置，比如说设置这个孩子节点是叶子节点（也就是不能展开的末节点），可以给其中的数据设置item.isLeaf = true
              } else {
                return resolve([]);
              }
            }
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    append(data) {
      console.log(data, "data.................");
      this.folderData = data;
      this.fatherFolderId = data.id;
      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      this.dialogFolderShow = true;
    },

    // remove(node, data) {
    // 	console.log(node, data, "......................data")
    // 	const parent = node.parent
    // 	const children = parent.data.children || parent.data
    // 	const index = children.findIndex((d) => d.id === data.id)
    // 	children.splice(index, 1)
    // },
    renderContent(h, { node, data }) {
      // 删除按钮，暂时隐藏。放在tree-btn  类里面
      // <span style="padding: 2px;color: red;border-radius: 2px;">
      // 					<i
      // 						class="el-icon-delete"
      // 						on-click={() => this.remove(node, data)}
      // 					></i>
      // 				</span>
      return (
        <span style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
          <span>{node.label}</span>
          <span class="tree-btn">
            <span style="color: #409EFF;padding: 2px;border-radius: 2px;margin-right: 4px;">
              <i class="el-icon-plus" on-click={() => this.append(data)}></i>
            </span>
          </span>
        </span>
      );
    },

    dialogFolderClose() {
      this.dialogFolderShow = false;
    },
    formInputFolderChange(e) {
      console.log(e, "e...................");
    },
    folderSubmit(d) {
      let self = this;
      var params = {
        FolderName: d.FolderName,
        LastFolderId: self.fatherFolderId,
        EnCode: d.EnCode,
        FolderType: d.FolderType,
        IsDelete: false,
      };
      var titleOpr = "新增成功";
      if (d.Id) {
        params["Id"] = d.Id;
        titleOpr = "编辑成功";
      }
      AjaxCommon(`/api/familyfolder`, "postForm", params)
        .then((res) => {
          console.log(res, "res..................");
          if (res.data.status == 200) {
            PopupCommon.notify("success", titleOpr);
            if (self.fatherFolderId != "0") {
              const newChild = {
                id: res.data.response,
                label: d.FolderName,
                children: [],
              };
              if (!self.folderData.children) {
                this.$set(self.folderData, "children", []);
              }
              self.folderData.children.push(newChild);
            } else {
              self.initLeftFolder();
            }
            self.dialogFolderClose();
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        })
        .catch((err) => {
          PopupCommon.notify("error", err.message);
        });
    },
    showFolder() {
      this.fatherFolderId = "0";
      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      this.dialogFolderShow = true;
    },
    deleteFolder(item) {
      let self = this;
      const id = item.Id;
      console.log(item, "item");
      PopupCommon.confirm(`确定删除【${item.FolderName}】？`)
        .then(() => {
          AjaxCommon("/api/familyfolder/Delete?id=" + id, "delete", {
            optReason: "删除",
          }).then((res) => {
            console.log(res, "res...............");
            if (res.data.status == 200) {
              PopupCommon.notify("success", "删除成功");
              self.initLeftFolder();
              self.dialogFolderClose();
            } else {
              PopupCommon.notify("error", res.data.msg);
            }
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    singleBtnClick() {
      if (this.yzzdSelect.length == 0) {
        PopupCommon.notify("info", "请选择预置资源");
        return;
      }
      this.dialogShow = false;
      console.log(this.yzzdSelect, "this.yzzdSelect......");
    },
    singleHandleSelectionChange(e) {
      this.yzzdSelect = e;
    },
    deleteAll() {
      if (this.selectItem.length == 0) {
        PopupCommon.notify("info", "请先勾选数据");
        return;
      }
      PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
        .then(() => {
          // self.optReason = ""
          // self.dialogVisible = true
          // // optReason
          // const data = {
          // 	index: i,
          // 	data: d[i],
          // }
          // self.formData = data
          // // this.$emit("deleteRow", data)
          console.log(this.selectItem);
        })
        .catch(() => {
          // 这里尽量写下，否则会报警告异常。
          console.log("已取消删除");
        });
    },
    handleSelectionChange(d) {
      this.selectItem = d;
      console.log(d);
    },
    formInputChange(e) {
      // if (e.filedName == "idCard") {
      // 	const data = CardId.getInfoByCardId(e.value)
      // 	if (data) {
      // 		let newData = e.allData
      // 		newData["birthday"] = data.birthday
      // 		newData["sex"] = data.sex
      // 		this.$refs.form.changeFormValue(newData)
      // 	}
      // }
      console.log(e);
    },
    submit(d) {
      console.log(d);
      // let self = this
      // console.log(d)
      // if (d.id) {
      // 	AjaxCommon("/ccdc/cfg/device/device/edit", "post", d)
      // 		.then((res) => {
      // 			if (res.data.code == 200) {
      // 				PopupCommon.notify("success", "操作成功")
      // 				self.initPage()
      // 				self.dialogClose()
      // 				this.dialogClose()
      // 			} else {
      // 				PopupCommon.notify("error", res.data.message)
      // 			}
      // 		})
      // 		.catch((err) => {
      // 			PopupCommon.notify("error", err.message)
      // 		})
      // } else {
      // 	delete d.id
      // 	AjaxCommon("/ccdc/cfg/device/device/add", "post", d)
      // 		.then((res) => {
      // 			if (res.data.code == 200) {
      // 				PopupCommon.notify("success", "操作成功")
      // 				self.initPage()
      // 				self.dialogClose()
      // 			} else {
      // 				PopupCommon.notify("error", res.data.message)
      // 			}
      // 		})
      // 		.catch((err) => {
      // 			PopupCommon.notify("error", err.message)
      // 		})
      // }
    },
    dialogClose() {
      clearInterval(this.inter);
      this.dialogShow = false;
    },
    searchClick() {
      this.current = 1;
      this.initPage();
    },
    resetClick() {
      this.FileName = "";
    },
    addClick() {
      // // 测试
      // AjaxCommon("/api/familyresouce/downloadfile/1", "get", null)

      if (this.tableIndex == "") {
        PopupCommon.notify("info", "请先选择左侧的族目录");
        return;
      }
      this.type = "add";
      this.dialogShow = true;
      this.dialogTitle = "新增族目录";
    },
    // 分页点击事件
    pageChange(p) {
      this.current = p;
      this.initPage();
    },
    viewRow(d) {
      this.type = "look";
      let formConfigItem = this.formConfig;
      formConfigItem.map((t) => {
        Object.keys(t).map((res) => {
          if (res == "fieldName") {
            t.filedValue = d.data[t[res]];
          }
        });
      });
      this.formConfig = formConfigItem;
      this.dialogShow = true;
      this.dialogTitle =
        "查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title;
    },
    downloadRow(d) {
      const id = d.data.Id;
      let self = this;
      AjaxCommon("/api/ResourceFile/downloadfile/" + id, "get", null).then(
        (res) => {
          if (res.status == 200) {
            var data = self.stringToArrayBuffer(res.data);
            var blob = new Blob([data]);
            const href = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.download = d.data.FileName;
            link.href = href;
            link.click();
            try {
              document.body.removeChild(link);
            } catch (error) {
              console.log(error.message);
            }
            URL.revokeObjectURL(href); // 释放内存
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    stringToArrayBuffer(str) {
      console.log(str, "str....................");
      var buf = new ArrayBuffer(str.length);
      var bufView = new Uint8Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    },
    deleteRow(d) {
      console.log(d);
      const id = d.data.Id;
      let self = this;
      AjaxCommon("/api/ResourceFile?id=" + id, "delete", {
        optReason: d.optReason,
      }).then((res) => {
        console.log(res, "res...............");
        if (res.data.status == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initPage();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    // 调用收藏
    async initSc() {
      const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get");
      var data = res.data.response;
      if (data && data.length > 0) {
        return data;
      }
      return [];
    },
    // 初始化事件
    async initPage(ids) {
      let self = this;
      const scList = await this.initSc();
      console.log(scList, "scList.....");
      var id = this.tableIndex;
      var imageAddress = ImageAddress;
      var idList = ids ? ids : [];
      AjaxCommon(
        `/api/familyresouce?page=${this.current}&intPageSize=${this.size}&familyFolderId=${id}&FileName=${this.FileName}`,
        "post",
        idList
      ).then((res) => {
        if (res.data.status == 200) {
          console.log(res, "datad....");
          var data = res.data.response.data;
          if (data && data.length > 0) {
            self.imgList = [];
            self.imgIndex = 0;
            data.map((t) => {
              t.id = t.Id;
              t.imgSrc = imageAddress + "/" + t.PreImage;
              t.name = t.FamilyName;
              t.show = false;
              t.username = t.UploadUser;
              t.updateTime = t.UploadTime;
              t.isSc =
                scList.length > 0 &&
                scList.filter((cc) => cc.Id == t.Id).length > 0
                  ? 1
                  : 0;
              t.gs = "rfa";
              t.bb = "版本1";

              var imgList = t.MulViewImages;
              var newImgList = [];
              if (imgList) {
                imgList = JSON.parse(imgList);
                if (imgList && imgList.length > 0) {
                  imgList.map((b) => {
                    b = imageAddress + "/" + b;
                    newImgList.push(b);
                    return b;
                  });
                }
                console.log(imgList, "imgList.....");
                t.MulViewImages = newImgList;
              } else {
                t.MulViewImages = [];
              }
              // 	id: 1,
              // imgSrc: SMJ,
              // name: "笔记本电脑1笔记本电脑1笔记本电脑1笔记本电脑1笔",
              // downloadUrl: "https://www.baidu.com",
              // // 是否收藏，1收藏了，0未收藏
              // isSc: 1,
              // gs: "rfa",
              // bb: "version1",
              // // 显示按钮
              // show: false,
              // username: "张三",
              // updateTime: "2024-12-12 11:11:11",
              return t;
            });
          }
          self.listData = data;
          self.count = res.data.response.dataCount;
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    initLeftFolder(callback) {
      this.showloading = true;
      let self = this;
      self.data = [];
      AjaxCommon(
        "/api/familyfolder/GetFullFolder?FolderType=1",
        "get",
        null
      ).then((res) => {
        console.log(res, "res.............");
        if (res.data.status == 200) {
          let treeDataList = [];
          Utility.createTreeTableData(res.data.response, treeDataList);
          console.log(treeDataList, "treeDataList.....");
          self.data = treeDataList;
          setTimeout(() => {
            if (treeDataList && treeDataList.length > 0) {
              console.log("self...............................");
              self.tableIndex = treeDataList[0].Id;
              self.tableName = treeDataList[0].FolderName;
              self.$nextTick(() => {
                self.$refs.tree.setCurrentKey(treeDataList[0].Id);
              });
              callback && callback();
            } else {
              self.tableIndex = "";
              self.tableName = "";
              self.tableList = [];
            }
            self.showloading = false;
          }, 1000);
        } else {
          PopupCommon.notify("error", res.data.msg);
          self.showloading = false;
        }
      });
    },
    imgLeftClick() {
      if (this.imgIndex != 0) {
        this.imgIndex--;
      } else {
        this.imgIndex = this.imgList.length - 1;
      }
      console.log(this.imgIndex, this.imgList);
    },
    imgRightClick() {
      if (this.imgIndex != this.imgList.length - 1) {
        this.imgIndex++;
      } else {
        this.imgIndex = 0;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    btnClick(index) {
      this.btnSelect = index;
    },
    itemOver(item) {
      this.listData.map((t) => {
        t.show = t.id == item.id;
      });
    },
    itemLevel() {
      this.listData.map((t) => {
        t.show = false;
      });
    },
    itemSc(item) {
      if (item.isSc == 1) {
        item.isSc = 0;
      } else {
        item.isSc = 1;
        this.oprRecord(2, item);
      }
      AjaxCommon("/api/favorite/favoritefamily?id=" + item.Id, "put", null);
    },
    bindBq(item) {
      console.log(item, "item");
      this.dialogBqShow = true;
    },
    downItem(item) {
      console.log(item, "下载....");
      this.oprRecord(3, item);
      let self = this;
      AjaxCommon(
        "/api/familyresouce/downloadfile/" + item.Id,
        "get",
        null
      ).then((res) => {
        if (res.status == 200) {
          var data = self.stringToArrayBuffer(res.data);
          var blob = new Blob([data]);
          const href = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.download = item.FamilyName;
          link.href = href;
          link.click();
          try {
            document.body.removeChild(link);
          } catch (error) {
            console.log(error.message);
          }
          URL.revokeObjectURL(href); // 释放内存
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    showDetail(item) {
      // 调用查看接口  /api/FamilyFileOprateController
      this.oprRecord(1, item);

      this.curItem = item;
      try {
        this.propertys = JSON.parse(JSON.parse(item.Propertys));
        this.propertysValue = this.propertys[0].FamilyParameters;
      } catch (error) {
        this.propertys = [];
        this.propertysValue = [];
      }
      this.imgIndex = 0;
      this.typeValue = 0;
      this.imgList = item.MulViewImages;
      this.initScroll();
      this.dialogShow = true;
    },
    /* 查看:1收藏:2下载:3 */
    oprRecord(type, item) {
      var userId = SessionCommon.getCurUserId();
      var params = {
        UserID: userId,
        FileID: item.Id,
        OprateType: type,
        OprateTime: "",
      };
      console.log(params);
      AjaxCommon("/api/FamilyFileOprateController", "putForm", params).then(
        (res) => {
          console.log(res, params);
        }
      );
    },
    initScroll() {
      setTimeout(() => {
        this.inter = setInterval(() => {
          this.imgRightClick();
        }, 5000);
      }, 2000);
    },
    // 页码点击事件,p当前页
    handleSizeChange(e) {
      // this.$emit("handleSizeChange", e)
      this.size = e;
      this.current = 1;
      this.initPage();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
      this.initLeftFolder(() => {
        this.initPage();
      });
    });

    /*窗口自适应，关键代码*/
    window.onresize = () => {
      this.getHeight();
    };
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 168px);
  overflow-y: auto;
  padding: 10px;
}

.flex .flex-left .flex-tree .tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
  background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-btn {
  color: red;
}

.main {
  margin: 10px 0;
}
.img-list {
  height: 480px;
  width: 100%;
  position: relative;
  text-align: center;
}
.img-list-left-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 230px;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-arrow i,
.img-list-right-arrow i {
  font-size: 26px;
  margin-top: 7px;
  cursor: pointer;
}
.img-list-right-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 230px;
  right: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-img {
  font-size: 12px;
}
.img-list-li {
  text-align: center;
  padding-bottom: 10px;
}
.img-list-li ul {
  display: inline-block;
  list-style: none;
}
.img-list-li ul li {
  font-size: 12px;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: #e1e1eb;
  float: left;
  margin-right: 20px;
}
.img-list-li ul li.hover {
  background-color: #8992a0 !important;
}
.detail-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-bottom: 8px;
}
.detail-update {
  color: #666;
  font-size: 16px;
}
.detail-wrapper {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
  width: 96%;
  padding: 10px;
  height: 580px;
}
.detail-wrapper-type {
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid #e4e7ed;
}
.collapseType {
  margin-top: 10px;
  overflow-y: auto;
  height: 535px;
}
.collapseType-item {
  padding: 0px 10px;
  display: flex;
}
.collapseType-item .collapseType-item-left {
  width: 50%;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
  color: #333;
  padding-right: 10px;
}

.collapseType-item .collapseType-item-right {
  width: 50%;
  text-align: left;
  font-size: 13px;
  line-height: 32px;
  color: #666;
}
.typeItem > div {
  background-color: #f5f5fa;
}

.list {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
.list-title {
  display: flex;
}
.list-title .list-title-left {
  width: 400px;
  text-align: left;
  height: 32px;
  line-height: 32px;
}
.list-title .list-title-left .searchContent {
  display: inline-block;
  margin-left: 30px;
}
.list-title .list-title-left .el-image {
  display: block;
  float: left;
  margin-top: 4px;
  margin-right: 6px;
}
.list-title .list-title-right {
  flex: 1;
  text-align: right;
}
.gjw-list {
  height: calc(100vh - 168px);
  background: #fff;
  margin-top: 10px;
  padding: 10px;
}
.gjw-list .gjw-list-list {
  height: calc(100vh - 222px);
  overflow-y: auto;
  padding-top: 0px;
  margin-bottom: 10px;
}
.gjw-list .gjw-list-list .gjw-list-item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
  margin-right: 10px;
  width: calc((100% - 50px) / 5);
  height: 240px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-button {
  text-align: center;
  height: 32px;
  width: 100%;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-row {
  border-bottom: 1px solid #e0e0e0;
  height: 28px;
  line-height: 28px;
  color: #666;
  font-size: 14px;
  background-color: #f5f5fa;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-title {
  font-size: 14px;
  text-align: center;
  color: #333;
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding: 0 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-img {
  height: 120px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
.gjw-list .gjw-list-page {
  background-color: #e0e0e0;
  height: 40px;
  padding-top: 10px;
  text-align: right;
}
.tab-wrapper {
  display: flex; /* flex布局 */
  justify-content: flex-start; /* 左对齐 */
  flex-wrap: wrap; /* 换行 */
  padding: 20px;
  background-color: #fff;
}

.tab-item {
  margin-right: 20px; /* 每个元素右间距设置为20px */
  width: calc((100% - 60px) / 4);
  height: 110px;
  border-radius: 4px;
}
.l-img {
  width: 50%;
  float: left;
}
.l-border {
  border: 1px solid #fff;
  width: 66px;
  height: 54px;
  text-align: center;
  float: right;
  margin-top: 27px;
  margin-right: 20px;
  border-radius: 4px;
  padding-top: 4px;
}
.r-text {
  float: right;
  width: 50%;
}
.r-text .tab {
  font-size: 26px;
  color: #fff;
  margin-top: 25px;
}
.r-text .title {
  font-size: 18px;
  color: #fff;
  margin-top: 6px;
}

.one {
  background-color: #a6a0f5;
}
.two {
  background-color: #58b5ff;
}
.three {
  background-color: #4ec8d1;
}
.four {
  background-color: #fbac69;
}
.tab-item:nth-of-type(4n + 0) {
  margin-right: 0;
}
.noData {
  margin-top: 100px;
  text-align: center;
  color: #999;
}
</style>
